<template>
<div class="container">
    <img :src="headerImg" class="img-responsive" />
    <van-cell-group v-for="item in dataList" :key="item.id">
        <van-cell :title="item.name" icon="location-o" :label="item.address" />
    </van-cell-group>
</div>
</template>

<script>
import { petrolStationServiceList } from '@/api/yi-qing-fang-kong.js'
export default {
  name: 'gasStation',
  data () {
    return {
      headerImg: require('@/assets/images/topimg.jpg'),
      dataList: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      petrolStationServiceList().then(ret => {
        if (ret.data.errcode === 0) {
          this.dataList = ret.data.data.result
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    }
  }
}
</script>

<style scoped>
    .container{
        padding: 10px;
    }
    .img-responsive {
        display: inline-block;
        height: auto;
        max-width: 100%;
    }
    .btn-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 0 20px 0;
    }
    .btn-group .btn-item {
        width: 48%;
        text-align: center;
        padding: 5px 0;
        color: darkolivegreen;
        border-radius: 5px;
        border: 1px solid darkolivegreen;
        font-size: 14px;
    }
    .btn-group .btn-item2{
        width: 48%;
        text-align: center;
        padding: 5px 0;
        color: #DDDDDD;
        border-radius: 5px;
        border: 1px solid #DDDDDD;
        font-size: 14px;
    }
    .fun-list>>>.van-cell__value {
        font-size: 12px;
    }
    #qrCode{
        text-align: center;
        margin: auto;
        border: 10px solid #FFFFFF;
    }
    .qrcode-item{
        margin: auto;
        text-align: center;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        margin-top: 40%;
    }
</style>
